<template>
  <view class="container">
    <!-- 顶部背景 -->
    <view class="header-bg">
      <image
        class="bg-image"
        src="@/static/qietu/上面底部@2x.png"
        mode="widthFix"
      />
    </view>
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image
          class="avatar"
          src="@/static/qietu/圆形 6.png"
          mode="aspectFill"
        />
        <view class="points-info">
          <text class="points">我的积分 366</text>
          <text class="desc">可兑换优惠券及限量周边</text>
        </view>
      </view>
      <view class="qr-code">
        <image src="@/static/qietu/二维码.png" mode="aspectFit" />
        <text>会员码</text>
      </view>
    </view>

    <!-- 功能区域 -->
    <view class="features">
      <view class="feature-row">
        <view class="feature-item" @click="handleFeatureClick('store')">
          <view class="icon-wrapper store">
            <image src="@/static/qietu/圆形 10.png" mode="aspectFit" />
          </view>
          <text class="title">门店自取</text>
          <text class="subtitle">提前下单更省时</text>
        </view>
        <view class="feature-item" @click="handleFeatureClick('takeout')">
          <view class="icon-wrapper takeout">
            <image src="@/static/qietu/蒙版分组.png" mode="aspectFit" />
          </view>
          <text class="title">外卖点单</text>
          <text class="subtitle">足不出户更省力</text>
        </view>
      </view>
      <view class="feature-row-3">
        <view class="feature-item" @click="handleFeatureClick('group')">
          <view class="icon-wrapper group">
            <image src="@/static/qietu/分组 1.png" mode="widthFix" />
          </view>
          <text class="title">团购优惠</text>
        </view>
        <view class="feature-item" @click="handleFeatureClick('recharge')">
          <view class="icon-wrapper recharge">
            <image src="@/static/qietu/分组 2.png" mode="widthFix" />
          </view>
          <text class="title">会员充值</text>
        </view>
        <view class="feature-item" @click="handleFeatureClick('mall')">
          <view class="icon-wrapper mall">
            <image src="@/static/qietu/分组 4.png" mode="widthFix" />
          </view>
          <text class="title">积分商城</text>
        </view>
      </view>
    </view> 
  </view>
</template>

<script setup>
import { ref } from "vue";
import * as uniApi from "@/common/utils/uni-api"; 
// 功能点击处理
const handleFeatureClick = (type) => {
  switch (type) {
    case "store":
      uniApi.navigateTo("/pages/menu/menu", { type: "store" });
      break;
    case "takeout":
      uniApi.navigateTo("/pages/menu/menu", { type: "takeout" });
      break;
    case "group":
      uniApi.showToast("团购功能即将上线");
      break;
    case "recharge":
      uniApi.navigateTo("/pages/mine/recharge");
      break;
    case "mall":
      uniApi.navigateTo("/pages/mine/mall");
      break;
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;

  .header-bg {
    width: 100%;
    image {
      width: 100%;
    }
  }
  // 饮品展示
  .drink-showcase {
    position: relative;
    padding: 0 20px;

    .price-tag {
      position: absolute;
      left: 40px;
      top: 0;
      z-index: 2;

      .symbol {
        font-size: 16px;
        color: #000;
      }

      .price {
        font-size: 32px;
        font-weight: bold;
        color: #000;
        margin: 0 2px;
      }

      .label {
        font-size: 12px;
        color: #666;
        background: #ffe44d;
        padding: 2px 6px;
        border-radius: 4px;
      }
    }

    .drink-name {
      position: absolute;
      left: 40px;
      top: 40px;
      font-size: 14px;
      color: #666;
      background: #ffe44d;
      padding: 4px 8px;
      border-radius: 4px;
    }

    .drink-image {
      width: 100%;
      height: 240px;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
  }

  // 用户信息卡片
  .user-card {
    margin: 30rpx;
    padding: 32rpx;
    background: #fff;
    border-radius: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    position: relative;
    top: -100rpx;
    z-index: 3;
    .user-info {
      display: flex;
      align-items: center;
      gap: 24rpx;

      .avatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }

      .points-info {
        display: flex;
        flex-direction: column;

        .points {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
        }

        .desc {
          font-size: 24rpx;
          color: #999;
          margin-top: 8rpx;
        }
      }
    }

    .qr-code {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 64rpx;
        height: 64rpx;
      }

      text {
        font-size: 24rpx;
        color: #999;
        margin-top: 8rpx;
      }
    }
  }

  // 功能区域
  .features {
    padding: 0 30rpx;
    position: relative;
    top: -110rpx;
    z-index: 3;
    .feature-row-3 {
      display: flex;
      gap: 20rpx;
      margin-bottom: 24rpx;
			justify-content: space-between;
      .feature-item {
        width: 210rpx;
        height: 272rpx;
        border-radius: 24rpx; 
        border-radius: 20rpx;
        background: #fff;
        display: flex;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        image {
          width: 76rpx;
          margin-bottom: 17rpx;
        }
        .title {
          color: #333;
          font-size: 30rpx;
          font-weight: 500;
        }
      }
    }
    .feature-row {
      display: flex;
      gap: 24rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
      padding: 60rpx 0;
      .feature-item {
        flex: 1;
        border-radius: 24rpx;
        padding: 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon-wrapper {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;

          image {
            width: 140rpx;
            height: 140rpx;
          }
        }

        .title {
          color: #333;
          font-size: 36rpx;
          font-weight: 500;
          letter-spacing: 0rpx;
          line-height: 47.74rpx;
          margin-bottom: 8rpx;
        }

        .subtitle {
          font-size: 24rpx;
          color: rgba(179, 179, 179, 1);
        }
      }
    }
  }
}

// 暗黑模式适配
[data-theme="dark"] {
  .container {
    background: linear-gradient(180deg, #1e2b1f 0%, #141414 100%);

    .status-bar {
      .time,
      .right {
        color: #fff;
      }
    }

    .top-menu {
      .menu-dots,
      .menu-circle {
        color: #fff;
      }

      .menu-circle {
        background: #2b2b2c;
      }
    }

    .user-card,
    .feature-item {
      background: #2b2b2c;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
    }

    .feature-item {
      .icon-wrapper {
        &.store {
          background: #1e2b1f;
        }
        &.takeout {
          background: #2b261e;
        }
        &.group {
          background: #1e2b1f;
        }
        &.recharge {
          background: #2b261e;
        }
        &.mall {
          background: #1e2b1f;
        }
      }
    }
  }
}
</style>
